<script setup lang="ts">
import { reactive } from 'vue';

const data = {
  colleges: ['智能制造学院', '人文学院', '医药卫生学院', '外语外贸学院', '烹饪学院', '能源与汽车工程学院', '设计学院'],
  majors: ['软件技术', '大数据技术', '工业机器人技术', '应用电子技术', '数控技术', '机电一体化技术', '通信技术', '计算机网络技术', '计算机应用技术', '物联网应用技术', '摸具设计与制造'],
  class: ['20软件技术1班', '20软件技术2班', '21软件技术1班', '21软件技术2班', '21软件技术3班', '22软件技术1班', '22软件技术2班', '22软件技术3班'],
  years: ['2019', '2020', '2021', '2022'],
};
const form = reactive({
  // 学业信息
  name: '张三', //  姓名
  number: '20001234', // 学号
  college: data.colleges[0], // 学院
  major: data.majors[0], // 专业
  class: data.class[0], // 班级
  year: data.years[1], // 入学年份
  gender: '男', // 性别
  idtype: '学生',
  desc: '哈喽，我是法外狂徒张三', // 个人简介
  // 账户信息
  phone: '',
  password:'',
  email: ''
});

const onSubmit = () => {
  console.log('submit!');
};
</script>
<template>
  <div class="container">
    <div class="left">
      <h1>学业信息设置</h1>
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="form.number" />
        </el-form-item>
        <el-form-item label="二级学院">
          <el-select v-model="form.college" :default-first-option="true">
            <el-option :label="item" :value="item" v-for="item in data.colleges" />
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-select v-model="form.major" placeholder="please select your zone">
            <el-option :label="item" :value="item" v-for="item in data.majors" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.class" placeholder="please select your zone">
            <el-option :label="item" :value="item" v-for="item in data.class" />
          </el-select>
        </el-form-item>
        <el-form-item label="入学年份">
          <el-select v-model="form.year" placeholder="please select your zone">
            <el-option :label="item" :value="item" v-for="item in data.years" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="男" border>男</el-radio>
            <el-radio label="女" border>女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份类型">
          <el-radio-group v-model="form.idtype">
            <el-radio label="学生" border>学生</el-radio>
            <el-radio label="教师" border>教师</el-radio>
            <el-radio label="其他" border>其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定修改</el-button>
          <el-button>重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <h1>基础信息设置</h1>
      <el-form :model="form" label-width="120px">
        <el-form-item label="手机">
          <el-input v-model="form.phone" />
        </el-form-item>
         <el-form-item label="密码">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="二级学院">
          <el-select v-model="form.college" :default-first-option="true">
            <el-option :label="item" :value="item" v-for="item in data.colleges" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定修改</el-button>
          <el-button>重 置</el-button>
        </el-form-item>
      </el-form>
      <div id="progress">
        <el-progress type="dashboard" :percentage="60">
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">完成度</span>
          </template>
        </el-progress>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  @include flex;
  h1 {
    text-align: center;
  }
  .left {
    flex: 1;
    height: 100%;
    overflow: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.16);
  }
  .right {
    flex: 1;
    height: 100%;
    overflow: auto;
    #progress {
      margin-top: 100px;
      @include flex;
      .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 28px;
      }
      .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
}

.el-input,
.el-select {
  width: 180px;
}

:deep(.el-textarea__inner) {
  width: 60%;
}
</style>
